<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div v-ui-ref="vSetRef" class="w-full h-full box">
    <div class="header">
      <img src="./lcsMoudlePages/lcs.png" style="height: 70px" />
      <div class="head_con flex items-end justify-center">
        <span style="font-size: 24px; font-weight: 500">{{ info[info['getKey']] }}</span>
        <span style="margin: 0 70px 0 20px">{{ radioList[currentIndex].name }}</span>
      </div>
    </div>
    <div class="flex danger">
      <div class="f">告警：</div>
      <div class="s" style="width: 1400px">
        <div>plc设备出现故障</div>
        <div style="margin: 0 0 0 20px">plc设备出现故障</div>
      </div>
    </div>
    <div class="content_li">
      <MoudleOne
        v-if="currentIndex == 0"
        :status-list="info.extension?.statusList?.value"
        :status-props="info.extension?.statusProps?.value"
        :tx="obj['tx']"
        :yx="obj['yx']"
      />
      <MoudleTwo v-if="currentIndex == 1" :status-list="info.extension?.statusList?.value" :status-props="info.extension?.statusProps?.value" />
      <MoudleThree v-if="currentIndex == 2" :status-list="info.extension?.statusList?.value" :status-props="info.extension?.statusProps?.value" />
      <div v-if="currentIndex == 3" class="w-full h-full">
        <Widget :list="info.list" />
      </div>
    </div>
    <div class="radio_list flex justify-center">
      <div
        v-for="(item, index) in radioList"
        :key="index"
        class="radio"
        :style="{
          background: currentIndex == index ? 'linear-gradient(to top, #004DED, #2495FB)' : '#002595',
        }"
        @click="choosePage(index)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import { cloneDeep } from 'lodash'
  import MoudleOne from './lcsMoudlePages/moudleOne.vue'
  import MoudleTwo from './lcsMoudlePages/moudleTwo.vue'
  import MoudleThree from './lcsMoudlePages/moudleThree.vue'
  export default defineComponent({
    name: 'UiLcsMoudlePage',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
      MoudleOne,
      MoudleTwo,
      MoudleThree,
    },
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        currentIndex: 0,
        infoComponent: {},
        obj: {},
        radioList: [
          {
            name: '监控画面',
          },
          {
            name: '送经量设定',
          },
          {
            name: '设备状态',
          },
          {
            name: '告警日志',
          },
          // {
          //   name: '设备列表',
          // },
        ],
      }
    },
    watch: {
      info: {
        handler() {
          console.log('11111111111')
          this.infoComponent = cloneDeep(this.info)
          this.$nextTick(() => {
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
          })
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
      // this.list = cloneDeep(this.allList)
    },
    mounted() {
      this.$nextTick(() => {
        this.getRequestData()
        this.inter && (clearInterval(this.inter), (this.inter = null))
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    methods: {
      choosePage(index) {
        this.currentIndex = index
      },
      getRequestData() {
        console.log('0000000000000')
        this.$request(this.infoComponent.extension.requestSet.value, () => {
          let res = {
            gj: 'plc设备故障',
            tx: [
              {
                name: 'L1梳节',
                status: 1,
              },
              {
                name: 'L2梳节',
                status: 1,
              },
              {
                name: 'L3梳节',
                status: 1,
              },
              {
                name: 'L4梳节',
                status: 1,
              },
              {
                name: 'L5梳节',
                status: 1,
              },
              {
                name: '牵引',
                status: 1,
              },
              {
                name: '卷曲',
                status: 1,
              },
            ],
          }
          let obj = {}
          this.infoComponent.extension.requestSet.value['resList'].map((item) => {
            obj[item.id] = res[item.props]
          })
          this.obj = cloneDeep(obj)
          console.log(obj, '-----------')
          // this.allList = res
          // this.list = cloneDeep(this.allList)
        })
      },
    },
  })
</script>
<style>
  .uiLcsMoudlePage {
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .header {
    height: 70px;
    width: 100%;
    position: relative;
  }
  .head_con {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    left: 0;
    top: 0;
    padding: 0 0 12px;
    font-size: 28px;
    font-weight: bold;
  }
  .items-end {
    align-items: flex-end;
  }
  .danger {
    height: 32px;
    margin: 20px 0;
    div {
      height: 100%;
    }
    .f {
      width: 60px;
      background: #f00;
      font-size: 18px;
      color: #fff;
      font-weight: bold;
      justify-content: center;
      display: flex;
      line-height: 30px;
      border-radius: 5px 0 0 5px;
      padding: 0 0 0 5px;
      position: relative;
      z-index: 3;
      &::after {
        content: '';
        position: absolute;
        right: -34px;
        top: -2px;
        display: inline-block;
        border: 18px solid #f00;
        border-color: transparent transparent transparent #f00;
      }
    }
    .s {
      margin: 0 30px 0 0;
      background: linear-gradient(to left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
      border-radius: 0 5px 5px 0;
      white-space: nowrap;
      overflow: hidden;
      padding: 0 20px 0 30px;
      display: flex;
      align-items: center;
      color: rgb(255, 0, 0);
      overflow: hidden;
      font-weight: bold;
      text-shadow: 0px 0px rgb(173, 23, 23);
      & > div {
        animation: yid 30s infinite linear;
        cursor: pointer;
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        transform: translateX(0);
      }
    }
  }
  .box {
    display: flex;
    flex-direction: column;
  }
  .content_li {
    height: 780px;
    margin: 0 30px 0 0;
    border: 2px solid #00277d;
    box-shadow: 0 0 10px 10px #001160 inset;
    border-radius: 5px;
  }
  .radio_list {
    margin: 25px 0 0;
  }
  .radio {
    width: 200px;
    height: 80px;
    background: #002595;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    color: #fff;
    letter-spacing: 1px;
    font-weight: bold;
    margin: 0 1px;
    cursor: pointer;
    filter: brightness(0.8);
    &:first-child {
      border-radius: 5px 0 0 5px;
    }
    &:last-child {
      border-radius: 0 5px 5px 0;
    }
  }
  @keyframes yid {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
</style>
